<template>
    <div class="guideCapsules">
        <div style="margin-bottom: 15px">
            <el-button type="primary" size="small" plain @click="addCard">添加引导胶囊</el-button>
        </div>
        <div class="channelCard" v-for="(item,i) in list" :key="i">
            <div class="cardTitle flexbetween">
                <span>{{'胶囊' + (i + 1)}}</span>
                <div class="iconBtn">
                    <el-tooltip effect="light" content="上移" placement="top" :enterable="false">
                        <span :class="['iconfont', 'icon-xiangshangyiji',{'disabled': i == 0}]" @click="cardUp(i)"></span>
                    </el-tooltip>
                    <el-tooltip effect="light" content="下移" placement="top" :enterable="false">
                        <span :class="['iconfont', 'icon-xiangxiayiji',{'disabled': i == list.length - 1}]" @click="cardDown(i)"></span>
                    </el-tooltip>
                    <el-tooltip effect="light" content="删除" placement="top" :enterable="false">
                        <span class="iconfont icon-shanchu" @click="delCard(i)"></span>
                    </el-tooltip>
                </div>
            </div>
            <div class="cardContent">
                <el-input v-model="item.name" placeholder="请输入" size="small"></el-input>
                <div class="link">
                    <el-popover placement="top" width="300">
                        <el-input size="small" v-model="item.link" placeholder="请输入跳转链接" />
                        <div slot="reference">关联内容:<span style="margin-right: 8px">(链接跳转)</span><span>{{item.link}}</span></div>
                    </el-popover>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "guideCapsules",
    props: {
        guideCapsules: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            list: this.guideCapsules
        }
    },
    methods: {
        addCard() {
            var obj = {
                name: "",
                link: "",
            }
            this.list.push(obj);
        },
        cardUp(index) {
            if (index != 0) {
                var tempOption = this.list[index - 1];
                this.$set(this.list, index - 1, this.list[index]);
                this.$set(this.list, index, tempOption);
            }
        },
        cardDown(index) {
            if (index != this.list.length - 1) {
                var tempOption = this.list[index + 1];
                this.$set(this.list, index + 1, this.list[index]);
                this.$set(this.list, index, tempOption);
            }
        },
        delCard(index) {
            this.list.splice(index, 1);
        },
    },
    watch: {
        guideCapsules(val) {
            this.list = val;
        },
        list(val) {
            this.$emit("update:guideCapsules", val);
        }
    }
}
</script>

<style lang="scss">
.guideCapsules {
    .channelCard {
        margin-left: 0 !important;
        .cardContent {
            display: flex;
            .el-input {
                width: 35%;
                flex-shrink: 0;
                margin-right: 20px;
            }
            .link {
                width: 60%;
                div {
                    color: #363c43;
                    span {
                        color: #6b5ee2;
                        cursor: pointer;
                        &:first-child {
                            margin-left: 15px;
                        }
                    }
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>